{%extends "base.html"%}
{%block body%}
<script src="/static/jquery.form.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
  	$('#formEdit').validate({
		rules:{
			'scontent': 'required'
		}
		,
		submitHandler: function(form) {
			$('#formEdit').ajaxSubmit({
				success:   showResponse,
				url:       '/vchat/add',
				type:      'post',
				timeout:   5000   
			});
		}	
	});
	function showResponse(data,status)  {
		$('#SendChat').attr('disabled','');		
		if(data=='ok')
		{
			updateChat();
			$('#scontent').val('');
		}
		if(data=='login')
			window.location="/user/vmember/add";
	}
	setup();
	/*$('#reload').change()
	{
		var value = $('#reload').val();
		if(value > 0 )
			window.location="/user/vchat?reload="+value;
	}*/
});
function updateChat() {
	var minDate = $('#minDate').val();
	$.get("/vchat/list_ajax",{minDate: minDate}, function(data){
			$("#chats").prepend(data);
		});	
}
function setup() {
	window.setInterval("updateChat()", ({{reload}}*1000));
	updateChat();
}
function ChangeReload()
{
	var value = $('#reload').val();
	if(value > 0 )
		window.location="/user/vchat?reload="+value;
}
</script>
<div>
<form name="formEdit" id="formEdit" action="" method="post">
<input type="hidden" name="minDate" id="minDate" value="{{minDate}}" />
<table border="0" cellpadding="5" cellspacing="0" width=98%>

<tr>
	<th valign="top">Message:</th>
	<td><textarea cols="60" rows="3"  name="scontent" id="scontent"></textarea></td>
</tr>
<tr><td></td><td><input type="submit" value="Send" id="SendChat">
&nbsp;<input type="text" value="{{reload}}" name="reload" id="reload" size="3"> seconds
<input type="button" value="Reload" onclick="ChangeReload();">
</td></tr>
</table>
</form>
</div>
<div id="chats" style="padding:10px;background-color:white;width:95%;height:85%; overflow:auto;"></div>
{%endblock%}